<template>
	<view class="main">
		<van-toast id="van-toast" />
		<tou_hand handtype='false' ref="mainindex"></tou_hand>

		<view class="show">
			<view class="sone">
				<input style="display: none;" type="nickname" placeholder="请输入昵称" @blur="onNickName" />
				
				<input placeholder="请输入真实姓名(退款用)，非必填" disabled="true" :value="name" v-if="!can_edit" />
				<input placeholder="" disabled="true" :value="phone" v-if="!can_edit" />
				
				<input placeholder="请输入真实姓名(退款用)，非必填" v-model="name" v-if="can_edit" />
				<input placeholder="输入手机号码" v-model="phone" @input="changeInput()" type="number" v-if="can_edit" />
				<view class="yztap" v-show="yzshow" v-if="can_edit">
					<input placeholder="输入验证码" v-model="yzma" type="number" :focus="setfocus" @blur="exitfocus" maxlength="4"/>
					<view class="yanbtn" v-show="Verification" @click="handleClick">获取验证码</view>
					<view class="yanbtn1" v-show="!Verification"><span>{{timer}}</span>s</view>
				</view>
				<view class="stwo" @click="xgbtn" v-if="can_edit">确认提交</view>
			</view>
		</view>
	</view>
</template>

<script>
	import no_captcha from '../../components/no-captcha/no-captcha.vue'
	import { Config } from '../../common/Config.js'
	export default {
		components: {
			no_captcha
		},
		data() {
			return {
				nickname: '',
				name: '', //用户姓名
				image: '',
				user_view: [],
				phone: '', //手机号
				timer: 60, //定义初始时间为60s
				yzma: '', //验证码
				yzshow: false,
				Verification: true, //通过v-show控制显示获取还是倒计时
				can_edit: false,
			}
		},
		onShow() {
			this.userdetail()
		},
		methods: {
			
			//获取验证码倒计时
			handleClick() {
				//this.setfocus = true
				if (this.phone == "" || !this.phone) {
					this.$toast.fail('请输入手机号')
				} else if (!(/^1[3-9]\d{9}$/.test(this.phone))) {
					this.$toast.fail('请输入正确的手机号格式')
				}
				else {
					// this.hkshow = true
					let data = {
						mobile: this.phone,
						// sessionId: this.sessionId
					}
					this.$base.request('user/bind/code', 'GET', data)
						.then(res => {
							if (res.data.code == 200) {
								this.timer = 60
								this.Verification = false; //点击button改变v-show的状态
								let auth_timer = setInterval(() => { //定时器设置每秒递减
									this.timer--; //递减时间
									if (this.timer <= 0) {
										this.Verification = true; //60s时间结束还原v-show状态并清除定时器
										clearInterval(auth_timer)
										// this.hkshow = false
									}
								}, 1000)
								this.$toast.success('验证码发送成功')
								
							} else {
								this.$toast.fail(res.data.msg)
							}
						})
						.catch(err => {
			
						})
				}
			},
			userdetail() {
				var user_view = uni.getStorageSync('user');
				console.log(user_view);
				this.user_view = user_view;
				if (this.user_view.realName) {
					this.name = this.user_view.realName
				}
				if (this.user_view.phone) {
					this.phone = this.user_view.phone
				}
				if(this.user_view.realName && this.user_view.phone){
					this.can_edit = false;
				}
				else{
					this.can_edit = true;
				}
			},

			onChooseAvatar(e) {
				console.log(e);
				
				var image = e.detail.avatarUrl;
				const userToken = uni.getStorageSync('userToken');
				var header = {
					"content-type": "multipart/form-data",
					"Authorization": "Bearer " + userToken,
				};
				uni.uploadFile({
					url: Config.api + 'common/qiniuupload',
					filePath: image,
					name: 'file',
					header: header,
					success: (uploadRes) => {
						console.log('上传成功', uploadRes);
						
					},
					fail: (uploadErr) => {
						console.log('上传失败', uploadErr);
					}
				});

			},

			onNickName(e) {
				this.nickname = e.detail.value;
			},

			// 确认修改
			xgbtn() {
				if (this.name == "" || !this.name) {
					this.$toast.fail('请正确输入真实姓名');
					return false;
				}

				if (this.phone == "" || !this.phone) {
					this.$toast.fail('请正确输入手机号');
					return false;
				}

				let data = {
					mobile: this.phone,
					realName: this.name,
					randCode: this.yzma
				}
				this.$base.request('user/bindMobile', 'POST', data)
					.then(res => {
						if (res.data.code == 200) {
							this.$toast.success(res.data.msg)
							this.can_edit = false;
							setTimeout(() => {
								uni.reLaunch({
									url: '/pages/index/index'
								})
							}, 500)

						} else {
							this.$toast.fail(res.data.msg)
						}
					})
					.catch(err => {

					})

			}

		}
	}
</script>

<style lang="scss" scoped>
	.main {
		width: 100%;
		height: 100vh;
		overflow-x: hidden;
		background-color: #2A3034;

		.hand {
			width: 100%;
			height: 400upx;
			text-size-adjust: 100% !important;
			-webkit-text-size-adjust: 100% !important;
			-moz-text-size-adjust: 100% !important;
			background: url('https://qiniu.jxyutuo.com/yanqin/tabBarimg//indexhand.png') no-repeat;
			// background-color: blue;
			// border-radius: 0 0 5% 5%;
			// background-image: linear-gradient(to right, #5260Ef , #428DE9);
			background-size: cover;
			box-sizing: border-box;
			padding-top: 100upx;
			padding-left: 33upx;
			position: relative;


			.handnei {
				width: 100%;
				display: flex;
				justify-content: center;
				flex-flow: column;
				align-items: center;

				.hleft {
					width: 161upx;
					height: 161upx;
					border-radius: 50%;
					padding: 5upx;
					background-color: #FFFFFF;

					image {
						width: 161upx;
						height: 161upx;
						border-radius: 50%;
					}
				}

				.wttt {
					color: #ffffff;
					font-size: 26rpx;
					margin-top: 20rpx;

				}

				.hright {
					height: 161upx;
					font-size: 24upx;
					font-family: PingFang SC Medium, PingFang SC Medium-Medium;
					font-weight: 500;
					// text-align: left;
					color: #ffffff;
					margin-left: 22upx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					box-sizing: border-box;

					view {
						// margin-bottom: 13upx;
						width: 500upx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}
			}

			.hshow {
				width: 686upx;
				// height: 113upx;
				padding: 30upx 0;
				border-radius: 8upx;
				background-color: rgba(58, 64, 68, 1);
				bottom: -60upx;
				// top: 304upx;
				// box-shadow: 0px 0px 5upx 2.5upx rgba(106, 106, 106, 0.9);
				position: absolute;
				display: flex;


				.hsleft {
					width: 50%;
					text-align: center;
					box-sizing: border-box;

					.hsone {
						font-size: 36upx;
						font-family: Arial Bold, Arial Bold-Bold;
						font-weight: 700;
						color: #fff;
					}

					.hstwo {
						font-size: 26upx;
						font-family: PingFang SC Medium, PingFang SC Medium-Medium;
						font-weight: 500;
						color: #D0D0D0;
					}

					.hsleftk {
						border-left: 1upx solid #c3defa;
					}
				}
			}

			.black {
				width: 22upx;
				height: 39upx;
				position: absolute;
				top: 29upx;
				left: 34upx;
				box-sizing: border-box;

				image {
					width: 22upx;
					height: 39upx;
				}

			}
		}

		.show {
			width: 100%;
			margin-top: 85upx;
			margin-bottom: 41upx;
			background-color: #2A3034;

			.sone {
				width: 92%;
				margin: 0 auto;
				box-sizing: border-box;
				padding: 31upx 43upx;
				background-color: #3A4044;

				input {
					font-size: 28upx;
					font-family: PingFang SC Medium, PingFang SC Medium-Medium;
					font-weight: 500;
					color: #D0D0D0;
					border-bottom: 1upx solid #4A4E52;
					padding: 14upx;
					margin-bottom: 31upx;
				}

				.yztap {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.yanbtn {
						width: 179upx;
						height: 54upx;
						border-radius: 28upx;
						font-size: 28upx;
						font-family: PingFang SC Medium, PingFang SC Medium-Medium;
						font-weight: 500;
						color: #ffffff;
						text-align: center;
						line-height: 54upx;
						background-color: #8DC321;
					}

					.yanbtn1 {
						width: 179upx;
						height: 54upx;
						border-radius: 28upx;
						font-size: 28upx;
						font-family: PingFang SC Medium, PingFang SC Medium-Medium;
						font-weight: 500;
						color: #ffffff;
						text-align: center;
						line-height: 54upx;
						background-color: #999999;
					}
				}

				.stwo {
					width: 100%;
					height: 88upx;
					border-radius: 48upx;
					background-color: #8DC321;
					font-size: 34upx;
					font-family: PingFang SC Medium, PingFang SC Medium-Medium;
					font-weight: 500;
					text-align: center;
					line-height: 88upx;
					margin: 0 auto;
					margin-top: 20upx;

					color: #ffffff;

				}
			}



			/deep/.van-popup {
				padding: 30upx;
				border-radius: 16upx;
			}

			.tishi {
				.tstou {
					color: #333333;
					font-size: 32upx;
					font-family: PingFang SC Bold, PingFang SC Bold-Bold;
					font-weight: 700;
					text-align: center;
				}

				.tsnei {
					font-size: 28upx;
					padding: 30upx;
					color: #555555;
				}

				.kbtn {
					width: 570upx;
					height: 75upx;
					background: #8DC321;
					font-size: 30upx;
					border-radius: 16upx;
					font-family: PingFang SC Bold, PingFang SC Bold-Bold;
					font-weight: 700;
					text-align: center;
					line-height: 75upx;
					margin: 0 auto;
					margin-top: 40upx;
					color: #ffffff;
				}
			}

			.sthree {
				width: 100%;
				box-sizing: border-box;
				padding: 36upx 58upx 0upx 28upx;
				font-size: 24upx;
				font-family: PingFang SC Bold, PingFang SC Bold-Bold;
				font-weight: 700;
				color: #666666;
				line-height: 40upx;

				.sthreehand {
					font-size: 28upx;
					font-family: PingFang SC Bold, PingFang SC Bold-Bold;
					font-weight: 700;
					color: #fff;
				}
			}
		}
	}

	.txbt {
		background: transparent;
		border: 0;
		padding: 0;
	}

	.txbt::after {
		display: none;
	}
</style>